<template>
  <div class="longcategoryview">
    <div class="longhead">
      <div class="top">
        <div class="top-top">
          <div class="top-top-backBtn">
            <span @click.stop="gotoHome()">
              <i
                ><svg
                  t="1734008920120"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4263"
                  width="16"
                  height="16"
                >
                  <path
                    d="M748.8 160 390.4 512l358.4 352c19.2 19.2 19.2 57.6 0 76.8-19.2 19.2-57.6 19.2-76.8 0L281.6 556.8c0 0-6.4 0-6.4-6.4C262.4 544 256 524.8 256 512c0-12.8 6.4-32 19.2-38.4 0 0 6.4 0 6.4-6.4l390.4-390.4c19.2-19.2 57.6-19.2 76.8 0C774.4 102.4 774.4 134.4 748.8 160z"
                    fill="#515151"
                    p-id="4264"
                  ></path>
                </svg></i>
            </span>
          </div>
          <div class="title">
            <div class="image">
              <img :src="theimg" />
            </div>
          </div>
        </div>
        <div class="site-box">
          <div class="left" is-link @click="showPopup()">
            <div class="siteText">
              <span>{{ theText }}</span>
            </div>
            <div class="siteImage">
              <img src="https://mall.leyifan.com/static/h5/new_images/icon_transfer.png" alt="" />
            </div>
          </div>
          <div class="right">
            <div class="inp-svg">
              <img
                src="https://mall.leyifan.com/static/h5/new_images/search_input_icon.png"
                alt=""
              />
            </div>
            <div class="uni-input-placeholder">
              <input
                type="text"
                placeholder="输入关键词，商品ID或网址"
                @click="gotosearch"
                disabled
              />
            </div>
          </div>
        </div>
        <div class="top-bottom">
          <div class="typelist">
            <div class="store_list" :class="{ expanded: isExpanded }">
              <div
                class="store_item"
                v-for="(store, index) in storelist"
                :key="index"
                @click.stop="selectStore(index, store.i)"
                :class="{ highlight: selectedStoreIndex === index }"
              >
                <img :src="store.e" style="width: 50rem; height: 50rem" />
                <div>{{ store.n }}</div>
              </div>
            </div>
            <div class="open" @click.stop="toggleExpand" v-if="!isExpanded">
              展开<img
                src="https://mall.leyifan.com/static/h5/new_images/class_icon_open.png"
                alt=""
              />
            </div>
            <div
              class="close"
              @click.stop="toggleExpand"
              style="
                font-size: 11rem;
                position: absolute;
                bottom: 10rem;
                display: flex;
                justify-content: center;
              "
              v-else
            >
              收起
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model:show="showLeft" position="right" :style="{ width: '80%', height: '100%' }">
      <div class="popup-box">
        <div class="title">
          <div class="left">
            <i
              ><svg
                t="1734055491466"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5953"
                width="16"
                height="16"
              >
                <path
                  d="M748.8 160 390.4 512l358.4 352c19.2 19.2 19.2 57.6 0 76.8-19.2 19.2-57.6 19.2-76.8 0L281.6 556.8c0 0-6.4 0-6.4-6.4C262.4 544 256 524.8 256 512c0-12.8 6.4-32 19.2-38.4 0 0 6.4 0 6.4-6.4l390.4-390.4c19.2-19.2 57.6-19.2 76.8 0C774.4 102.4 774.4 134.4 748.8 160z"
                  fill="#515151"
                  p-id="5954"
                ></path>
              </svg></i>
          </div>
          <div class="name">站点</div>
          <div class="seat"></div>
        </div>
        <div class="scroll-view-box">
          <ul>
            <li
              v-for="(item, index) in siteList.slice(0, 11)"
              :key="index"
              @click.stop="storefun(item.value, item.headImage, item.Text)"
            >
              <img
                :src="`https://mall.leyifan.com/static/h5/new_images/site_bg_${index + 1}.png`"
                alt=""
              />
              <div v-if="index === siteList.length - 2" class="tag">公测中</div>
              <span>{{ item.introduce }}</span>
            </li>
          </ul>
        </div>
      </div>
    </van-popup >
    <div class="sidebar">
      <div class="vertical-tabs" v-show="leftlist">
        <div
          v-for="(tab, index) in leftlist"
          :key="tab"
          class="tab-item"
          :class="{ active: activeTab === tab }"
          @click.stop="changestores(tab, tab.l)"
        >
          <span>{{ tab.n }}</span>
        </div>
      </div>

      <div class="tab-content">
        <div v-for="item in list" :key="item.n">
          <HomeCommendItem :item="item" class="home-commend-item"></HomeCommendItem>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from '@/api/axios'
// import { Popup, showToast, Switch } from 'vant'
import router from '@/router'
import HomeCommendItem from '@/components/HomeCommendItem.vue'
let changestores = function (tab, id) {
  activeTab.value = tab
  if(myvalue.value == 'PAYPAY' ){
      axios.get(`https://api.mall.leyifan.com/api/front/products/paypay/itemList?cid=${id}&toTranslate=0&originSite=PAYPAY`).then(res=>{
        // console.log('PAYPAY',res);
        list.value = res.data.data.list
      })
    }else{
      axios
    .get(`https://api.mall.leyifan.com/api/front/products/${myvalue.value}?cid=${id}&toTranslate=0`)
    .then((res) => {
      // console.log('store', res.data)
      list.value = res.data.data.list
      console.log('store', res.data.data.list)
    })
    .catch((error) => {
      console.error('Error fetching data:', error)
    })
    }

}
let siteList = ref(null)
let myvalue = ref(null)
let showLeft = ref(false)
let theimg = ref('')
let theText = ref('')
let startdata = ref(null)
// 分类列表
let storelist = ref([])
let leftlist = ref([])
let all = ref([])
let selectedStoreIndex = ref<number | null>(0)
// 新增状态变量来控制 store_list 的样式
let isExpanded = ref(false)
// sidebar
let activeTab = ref(null)
//商品列表
let list = ref([])
const route = useRoute()
myvalue.value = route.query.value
const showPopup = () => {
  showLeft.value = true
}
const gotoHome = () => {
  router.back()
}
const gotosearch = () => {
  router.push({ path: '/search', query: { value: myvalue.value } })
}
const storefun = (val: string, img: string, text: string) => {
  router.replace({ query: { value: val } })
  theimg.value = img
  showLeft.value = false
  theText.value = text
  myvalue.value = val
  getStorelistAndLeftlist()
  axios
    .get(
      `https://api.mall.leyifan.com/api/front/category/list?originSite=${val}&level=3&language=chs`
    )
    .then((res) => {
      storelist.value = res.data.data.filter((o) => o.p == 0)
      all.value = res.data.data
    })
    .catch((error) => {
      console.error('Error fetching data:', error)
    })
}
axios
  .get('https://api.mall.leyifan.com/api/front/index/siteList')
  .then((res) => {
    siteList.value = res.data.data
    if (route.query.value) {
      startdata.value = siteList.value.filter((o) => o.value == route.query.value)
      theText.value = startdata.value[0].Text
      theimg.value = startdata.value[0].headImage
    } else {
      theimg = ref(
        'https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/config/2024/12/12/d533b2efe4b34dc4bcd77f8e63dce59ebaq9l2l0n4.png'
      )
      theText = ref('mercari')
    }
  })
  .catch((error) => {
    console.error('Error fetching data:', error)
  })

const getStorelistAndLeftlist = function(){
  axios
  .get(
    `https://api.mall.leyifan.com/api/front/category/list?originSite=${myvalue.value}&level=3&language=chs`
  )
  .then((res) => {
    storelist.value = res.data.data.filter((o) => o.p == 0)
    all.value = res.data.data
    leftlist.value = all.value.filter((o) => o.p == storelist.value[0].i)
    activeTab.value = leftlist.value[0]
    selectedStoreIndex.value = 0

    console.log('store', storelist.value, 'left', leftlist.value, 'act', activeTab.value)
    if(myvalue.value == 'PAYPAY' ){
      axios.get(`https://api.mall.leyifan.com/api/front/products/paypay/itemList?cid=${leftlist.value[0].l}&toTranslate=0&originSite=PAYPAY`).then(res=>{
        console.log('post',res);
        list.value = res.data.data.list
      })
    }else{
      axios
    .get(`https://api.mall.leyifan.com/api/front/products/${myvalue.value}?cid=${leftlist.value[0].l}&toTranslate=0`)
    .then((res) => {
      // console.log('store', res.data)
      list.value = res.data.data.list
    })
    .catch((error) => {
     console.error('Error fetching data:', error)
    })
    }
    
  })
  .catch((error) => {
    console.error('Error fetching data:', error)
  })
}
getStorelistAndLeftlist()
// 添加高亮
const selectStore = (index: number, i) => {
  console.log('Selecting store:', index, i);
  selectedStoreIndex.value = index
  leftlist.value = all.value.filter((o) => o.p == i)
  activeTab.value = leftlist.value[0]
  if(myvalue.value == 'PAYPAY' ){
      axios.get(`https://api.mall.leyifan.com/api/front/products/paypay/itemList?cid=${leftlist.value[0].l}&toTranslate=0&originSite=PAYPAY`).then(res=>{
        console.log('post',res);
        list.value = res.data.data.list
      })
    }else{
      axios
    .get(`https://api.mall.leyifan.com/api/front/products/${myvalue.value}?cid=${leftlist.value[0].l}&toTranslate=0`)
    .then((res) => {
      // console.log('store', res.data)
      list.value = res.data.data.list
    })
    .catch((error) => {
     console.error('Error fetching data:', error)
    })
    }
  console.log(leftlist.value, '666')
}
// 新增点击事件处理函数
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}
</script>
  
  <style scoped lang="less">
.longcategoryview {
  ::-webkit-scrollbar{
    display: none;
  }
  .longhead {
    width: 100vw;
    // height: 40rem;
    background-color: #fff;
    font-size: 18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    .top {
      width: 100%;
      height: 100rem;
      position: fixed;
      top: 0;
      background-color: white;
      .top-top {
        box-sizing: border-box;
        width: 375rem;
        height: 42rem;
        min-height: 42rem;
        .top-top-backBtn {
          z-index: 100;
          position: absolute;
          left: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding-left: 14rem;
          height: 42rem;
        }
        .title {
          height: 42rem;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          .image {
            width: 95rem;
            height: 26rem;
          }
        }
      }
      .site-box {
        margin-top: 14rem;
        padding: 0 14rem;
        display: flex;
        .left {
          width: 102rem;
          min-width: 102rem;
          height: 42rem;
          background-color: rgba(51, 51, 51, 0.06);
          border-radius: 8rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 14rem 0;
          padding-right: 11rem;
          transition: background-color 0.1s ease-in-out;
          .siteText {
            font-size: 14rem;
            line-height: normal;
            color: #333;
            font-weight: 700;
            flex: 1;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            span {
              color: black;
            }
          }
          .siteImage {
            width: 14rem;
            min-width: 14rem;
            min-height: 14rem;
            height: 14rem;
            img {
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -moz-user-select: none;
              display: block;
            }
          }
        }
        .right {
          display: flex;
          margin-left: 10rem;
          background-color: rgba(51, 51, 51, 0.06);
          border-radius: 8rem;
          height: 42rem;
          align-items: center;
          flex: 1;
          padding-left: 10rem;
          padding-right: 11rem;
          transition: background-color 0.2s ease-in-out;
          .inp-svg {
            width: 22rem;
            height: 22rem;
            min-width: 22rem;
            min-height: 22rem;
            img {
              width: 22rem;
              height: 22rem;
            }
          }
          .uni-input-placeholder {
            top: auto !important;
            left: 0;
            color: grey;
            overflow: hidden;
            text-overflow: clip;
            white-space: pre;
            word-break: keep-all;
            // pointer-events: none;
            line-height: inherit;
            input {
              border: 0;
              font-size: 12.5rem !important;
              color: #c4c2c1;
              position: relative;
              display: block;
              height: 100%;
              background: none;
              color: inherit;
              opacity: 1;
              font: inherit;
              line-height: inherit;
              letter-spacing: inherit;
              text-align: inherit;
              text-indent: inherit;
              text-transform: inherit;
              text-shadow: inherit;
            }
          }
        }
      }
      .typelist {
        width: 100%;
        padding: 14rem;
        position: relative;
        background-color: white;
        z-index: 999;
        .store_list {
          width: 100%;
          margin-top: 10rem;
          height: 76rem;
          overflow-x: scroll;
          display: flex;
          background-color: white;
          z-index: 55;
          &.expanded {
            height: 400rem; /* 或者你想要的高度 */
            overflow-y: scroll; /* 根据需要调整 */
            flex-wrap: wrap;
            background-color: white;
            display: block;
            padding-bottom: 30rem;

            .store_item:nth-child(5n) {
              width: 50rem !important;
              height: 68rem;
              display: inline-block;
              padding-right: 0 !important;
              margin-right: 0rem !important;
              padding-bottom: 16rem;
              box-sizing: border-box;
            }
            .store_item {
              width: 68rem;
              height: 68rem;
              display: inline-block;
              padding-right: 15rem;
              margin-right: 6.25rem;
              padding-bottom: 16rem;
              box-sizing: border-box;
              img {
                // width: 44rem;
                // height: 44rem !important;
                border-radius: 6rem;
                // object-fit: contain;
              }
              div {
                width: 50rem;
                padding: 0 3rem;
                display: flex;
                justify-content: center;
                font-size: 10rem;
                overflow: hidden;
                text-wrap: nowrap;
                text-overflow: ellipsis;
              }
            }
            .store_item.highlight {
              width: 68rem;
              height: 68rem;
              display: inline-block;
              box-sizing: border-box;
              img {
                width: 50rem;
                height: 50rem;
                border-radius: 6rem;
                border: 2rem solid #ff3d58;
              }
              div {
                width: 50rem;
                padding: 0 3rem;
                text-align: center;
                background-color: #ff3d58;
                color: white;
                font-size: 10rem;
                border-radius: 6rem;
                overflow: hidden;
                text-overflow: ellipsis;
                text-wrap: nowrap;
              }
            }
          }
          .store_item {
            width: 68rem;
            height: 68rem;
            display: inline-block;
            padding-right: 18rem;
            margin-right: 6.25rem;
            padding-bottom: 16rem;
            box-sizing: border-box;
            img {
              // width: 44rem;
              // height: 44rem;
              border-radius: 6rem;
            }
            div {
              width: 50rem;
              padding: 0 3rem;
              display: flex;
              justify-content: center;
              font-size: 10rem;
              overflow: hidden;
              text-wrap: nowrap;
              text-overflow: ellipsis;
            }
          }
          .store_item.highlight {
            width: 68rem;
            height: 68rem;
            display: inline-block;
            box-sizing: border-box;
            img {
              width: 44rem;
              border-radius: 6rem;
              border: 2rem solid #ff3d58;
            }
            div {
              width: 50rem;
              padding: 0 3rem;
              text-align: center;
              background-color: #ff3d58;
              color: white;
              font-size: 10rem;
              border-radius: 6rem;
              overflow: hidden;
              text-overflow: ellipsis;
              text-wrap: nowrap;
            }
          }
        }
        .open {
          position: absolute;
          right: 14rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          top: 0;
          background-color: white;
          width: 25rem;
          height: 100%;
          padding-left: 14rem;
          font-size: 11rem;
          line-height: 11rem;
          img {
            width: 11rem;
            height: 11rem;
          }
        }
        .close {
          width: 361rem;
          padding-top: 14rem;
          left: 50%;
          transform: translateX(-50%);
          background-color: white;
        }
      }
    }
  }
  .popup-box {
    overflow-x: none;
    .title {
      height: 42rem;
      min-height: 42rem;
      padding: 12rem 13rem;
      display: flex;
      .left {
        box-sizing: border-box;
      }
      .name {
        text-align: center;
        flex: 1;
        color: #333;
        font-weight: 700;
      }
      .seat {
        width: 22rem;
        height: 22rem;
      }
    }
    .scroll-view-box {
      z-index: 99999;
      ul {
        padding: 16rem 14rem 0;
        box-sizing: border-box;
        li {
          width: 283rem;
          height: 96rem;
          border-radius: 8rem;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          margin-top: 10rem;
          position: relative;
          transition: background-color 0.2s ease-in-out;
          overflow-x: none;
          position: relative;
          img {
            max-width: 95%;
            width: 283rem;
            height: 96rem;
          }
          span {
            position: absolute;
            font-size: 12rem;
            line-height: 12rem;
            color: #fff;
            font-weight: 400;
            position: absolute;
            bottom: 26rem;
            left: 20rem;
          }
          .tag {
            background-image: url();
            position: absolute;
            right: 13rem;
            top: 0;
            height: 28rem;
            width: 84rem;
            z-index: 2;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            color: #fff;
            font-size: 10rem;
            line-height: 10rem;
            font-weight: 500;
            text-align: right;
            padding: 5rem 19rem 0 0;
            background-image: url();
          }
        }
      }
    }
  }
  .sidebar {
    width: 100vw;
    height: 450rem;
    position: relative;
    margin-top: 215rem;
    z-index: 0;
    .vertical-tabs {
      width: 90rem;
      height: 450rem;
      // padding-bottom: 20rem;
      overflow: scroll;
      position: absolute;
      top: 0;
      left: 0;
      .tab-item {
        padding: 15rem 23rem 15rem 14rem;
        &.active {
          span {
            font-size: 13px;
            font-weight: 700;
            position: relative;
            z-index: -1;
            white-space: pre-wrap;

            &::after {
              content: '';
              position: absolute;
              background: linear-gradient(270deg, #fff9d2, #ff8192);
              border-radius: 3px;
              height: 6px;
              bottom: -2px;
              width: 100%;
              left: 0;
              right: 0;
              opacity: 0.9;
              z-index: -1;
            }
          }
        }
        span {
          font-size: 13px;
          // font-weight: 700;
          // position: relative;
          z-index: -1;
          white-space: pre-wrap;
        }
      }
    }
    .tab-content {
      width: 286rem;
      height: 100%;
      padding: 15rem 14rem 0 14rem;
      position: absolute;
      overflow: scroll;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      right: 0;
      top: 0;
      z-index: -1;
      .home-commend-item {
        width: 126rem;
        height: 274rem;
        margin-bottom: 15rem; /* 可以根据需要调整间距 */
      }
    }
  }
}
</style>